<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
  margin: 0;
  padding: 0;
}
#mindmap {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/d3@5"></script><script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.6.0/dist/view.min.js"></script>
</head>
<body>
<svg id="mindmap"></svg>
<script>markmap.markmap('svg#mindmap',{"t":"heading","d":1,"v":"前端开发内容体系","c":[{"t":"heading","d":2,"v":"了解课程","c":[{"t":"heading","d":3,"v":"前端开发简介","c":[{"t":"list_item","d":4,"v":"行业发展"},{"t":"list_item","d":4,"v":"职位描述"},{"t":"list_item","d":4,"v":"任职要求"},{"t":"list_item","d":4,"v":"学习路径"}]},{"t":"heading","d":3,"v":"课程概述","c":[{"t":"list_item","d":4,"v":"课程定位","c":[{"t":"list_item","d":5,"v":"前端开发系列课程","c":[{"t":"list_item","d":6,"v":"界面设计"},{"t":"list_item","d":6,"v":"前端开发"},{"t":"list_item","d":6,"v":"交互开发"},{"t":"list_item","d":6,"v":"混合式APP开发"},{"t":"list_item","d":6,"v":"微信开发"}]},{"t":"list_item","d":5,"v":"前端开发学习路径","c":[{"t":"list_item","d":6,"v":"网页布局"},{"t":"list_item","d":6,"v":"动态交互"},{"t":"list_item","d":6,"v":"组件化思想、重构"},{"t":"list_item","d":6,"v":"移动web APP开发"},{"t":"list_item","d":6,"v":"小程序应用"},{"t":"list_item","d":6,"v":"主流框架构建应用"},{"t":"list_item","d":6,"v":"综合实践"}]}]},{"t":"list_item","d":4,"v":"课程内容"},{"t":"list_item","d":4,"v":"课程资源"},{"t":"list_item","d":4,"v":"学习方法"}]},{"t":"heading","d":3,"v":"牛刀小试","c":[{"t":"list_item","d":4,"v":"开发环境部署","c":[{"t":"list_item","d":5,"v":"Hbuilder"},{"t":"list_item","d":5,"v":"Chrome"}]},{"t":"list_item","d":4,"v":"Hello World"}]}]},{"t":"heading","d":2,"v":"初识HTML","c":[{"t":"heading","d":3,"v":"初见建筑师HTML","c":[{"t":"heading","d":4,"v":"HTML概念"},{"t":"heading","d":4,"v":"HTML基本语法"},{"t":"heading","d":4,"v":"HTML标签与属性"},{"t":"heading","d":4,"v":"识别HTML","c":[{"t":"list_item","d":5,"v":"过时的标签"},{"t":"list_item","d":5,"v":"错误的写法"}]}]},{"t":"heading","d":3,"v":"搭建极简网页","c":[{"t":"list_item","d":4,"v":"文档类型定义"},{"t":"list_item","d":4,"v":"文档节点","c":[{"t":"list_item","d":5,"v":"html"},{"t":"list_item","d":5,"v":"head"},{"t":"list_item","d":5,"v":"body"}]},{"t":"list_item","d":4,"v":"外部文本节点","c":[{"t":"list_item","d":5,"v":"style"},{"t":"list_item","d":5,"v":"script"}]},{"t":"list_item","d":4,"v":"节点元素","c":[{"t":"list_item","d":5,"v":"header"},{"t":"list_item","d":5,"v":"footer"},{"t":"list_item","d":5,"v":"main"},{"t":"list_item","d":5,"v":"nav"},{"t":"list_item","d":5,"v":"aside"},{"t":"list_item","d":5,"v":"section"},{"t":"list_item","d":5,"v":"article"}]}]},{"t":"heading","d":3,"v":"处理文本","c":[{"t":"list_item","d":4,"v":"标题"},{"t":"list_item","d":4,"v":"p"},{"t":"list_item","d":4,"v":"容器","c":[{"t":"list_item","d":5,"v":"div"},{"t":"list_item","d":5,"v":"span"}]},{"t":"list_item","d":4,"v":"强调、引用","c":[{"t":"list_item","d":5,"v":"em"},{"t":"list_item","d":5,"v":"strong"},{"t":"list_item","d":5,"v":"q"},{"t":"list_item","d":5,"v":"cite"},{"t":"list_item","d":5,"v":"mark"},{"t":"list_item","d":5,"v":"blockquote"}]},{"t":"list_item","d":4,"v":"格式化本文","c":[{"t":"list_item","d":5,"v":"i"},{"t":"list_item","d":5,"v":"u"},{"t":"list_item","d":5,"v":"b"},{"t":"list_item","d":5,"v":"s"},{"t":"list_item","d":5,"v":"sup"},{"t":"list_item","d":5,"v":"sub"},{"t":"list_item","d":5,"v":"big"},{"t":"list_item","d":5,"v":"small"},{"t":"list_item","d":5,"v":"var"},{"t":"list_item","d":5,"v":"code"},{"t":"list_item","d":5,"v":"编辑","c":[{"t":"list_item","d":6,"v":"ins"},{"t":"list_item","d":6,"v":"del"}]}]}]},{"t":"heading","d":3,"v":"嵌入媒体","c":[{"t":"list_item","d":4,"v":"媒体嵌入与资源地址"},{"t":"list_item","d":4,"v":"图像相关","c":[{"t":"list_item","d":5,"v":"img"},{"t":"list_item","d":5,"v":"figure"},{"t":"list_item","d":5,"v":"figcaption"}]},{"t":"list_item","d":4,"v":"音视频相关","c":[{"t":"list_item","d":5,"v":"audio"},{"t":"list_item","d":5,"v":"video"},{"t":"list_item","d":5,"v":"svg"},{"t":"list_item","d":5,"v":"canvas"}]}]},{"t":"heading","d":3,"v":"创建超链接","c":[{"t":"list_item","d":4,"v":"a"},{"t":"list_item","d":4,"v":"普通链接"},{"t":"list_item","d":4,"v":"页内链接"},{"t":"list_item","d":4,"v":"热区链接","c":[{"t":"list_item","d":5,"v":"map"},{"t":"list_item","d":5,"v":"area"}]}]}]},{"t":"heading","d":2,"v":"上手CSS","c":[{"t":"heading","d":3,"v":"邂逅化妆师CSS","c":[{"t":"list_item","d":4,"v":"CSS概念"},{"t":"list_item","d":4,"v":"CSS语法"},{"t":"list_item","d":4,"v":"CSS使用方式"},{"t":"list_item","d":4,"v":"牛刀小试"}]},{"t":"heading","d":3,"v":"CSS选择的艺术","c":[{"t":"list_item","d":4,"v":"基础选择器"},{"t":"list_item","d":4,"v":"高级选择器"}]},{"t":"heading","d":3,"v":"颜色与背景","c":[{"t":"list_item","d":4,"v":"颜色与单位"},{"t":"list_item","d":4,"v":"背景相关属性"},{"t":"list_item","d":4,"v":"CSS Sprite"},{"t":"list_item","d":4,"v":"CSS渐变（可选）"}]},{"t":"heading","d":3,"v":"边框圆角阴影","c":[{"t":"list_item","d":4,"v":"边框"},{"t":"list_item","d":4,"v":"圆角"},{"t":"list_item","d":4,"v":"CSS绘图与按钮"}]},{"t":"heading","d":3,"v":"CSS文本样式","c":[{"t":"list_item","d":4,"v":"字体"},{"t":"list_item","d":4,"v":"文本"},{"t":"list_item","d":4,"v":"文本装饰"},{"t":"list_item","d":4,"v":"书写模式"}]},{"t":"heading","d":3,"v":"列表","c":[{"t":"list_item","d":4,"v":"构建列表","c":[{"t":"list_item","d":5,"v":"ol"},{"t":"list_item","d":5,"v":"ul"},{"t":"list_item","d":5,"v":"dl"}]},{"t":"list_item","d":4,"v":"语义化使用"},{"t":"list_item","d":4,"v":"美化列表"}]},{"t":"heading","d":3,"v":"表格","c":[{"t":"list_item","d":4,"v":"构建表格"},{"t":"list_item","d":4,"v":"table"},{"t":"list_item","d":4,"v":"caption"},{"t":"list_item","d":4,"v":"tr"},{"t":"list_item","d":4,"v":"th"},{"t":"list_item","d":4,"v":"td"},{"t":"list_item","d":4,"v":"thead"},{"t":"list_item","d":4,"v":"tbody"},{"t":"list_item","d":4,"v":"tfoot"},{"t":"list_item","d":4,"v":"col"},{"t":"list_item","d":4,"v":"colgroup"},{"t":"list_item","d":4,"v":"美化表格"},{"t":"list_item","d":4,"v":"细线表格"},{"t":"list_item","d":4,"v":"斑马纹表格"}]}]},{"t":"heading","d":2,"v":"玩转布局","c":[{"t":"heading","d":3,"v":"盒模型"},{"t":"heading","d":3,"v":"浮动"},{"t":"heading","d":3,"v":"定位"},{"t":"heading","d":3,"v":"布局案例"},{"t":"heading","d":3,"v":"弹性盒模型（可选）"}]},{"t":"heading","d":2,"v":"深入CSS","c":[{"t":"heading","d":3,"v":"浏览器兼容","c":[{"t":"list_item","d":4,"v":"can i use"},{"t":"list_item","d":4,"v":"浏览器前缀"},{"t":"list_item","d":4,"v":"Autoprefixer(可选)"}]},{"t":"heading","d":3,"v":"过渡"},{"t":"heading","d":3,"v":"动画"},{"t":"heading","d":3,"v":"转换"},{"t":"heading","d":3,"v":"响应式布局（可选）","c":[{"t":"list_item","d":4,"v":"媒体查询"},{"t":"list_item","d":4,"v":"响应式布局案例"}]},{"t":"heading","d":3,"v":"常见UI库（可选）","c":[{"t":"list_item","d":4,"v":"bootstrap"},{"t":"list_item","d":4,"v":"mazeui"}]},{"t":"heading","d":3,"v":"命名规范与机制","c":[{"t":"list_item","d":4,"v":"命名规则"}]}]},{"t":"heading","d":2,"v":"构建组件","c":[{"t":"heading","d":3,"v":"新闻列表"},{"t":"heading","d":3,"v":"导航菜单","c":[{"t":"list_item","d":4,"v":"单列菜单"},{"t":"list_item","d":4,"v":"下拉菜单"},{"t":"list_item","d":4,"v":"手风琴菜单"}]},{"t":"heading","d":3,"v":"卡片布局","c":[{"t":"list_item","d":4,"v":"新闻卡片"},{"t":"list_item","d":4,"v":"图片卡片"}]},{"t":"heading","d":3,"v":"注册表单","c":[{"t":"list_item","d":4,"v":"构建表单"},{"t":"list_item","d":4,"v":"form"},{"t":"list_item","d":4,"v":"fieldset"},{"t":"list_item","d":4,"v":"legend"},{"t":"list_item","d":4,"v":"input"},{"t":"list_item","d":4,"v":"label"},{"t":"list_item","d":4,"v":"select"},{"t":"list_item","d":4,"v":"textarea"},{"t":"list_item","d":4,"v":"button"},{"t":"list_item","d":4,"v":"output"},{"t":"list_item","d":4,"v":"keygen"},{"t":"list_item","d":4,"v":"progress"},{"t":"list_item","d":4,"v":"meter"},{"t":"list_item","d":4,"v":"datalist"},{"t":"list_item","d":4,"v":"表单布局"}]}]},{"t":"heading","d":2,"v":"实现案例","c":[{"t":"heading","d":3,"v":"仿腾讯会议"},{"t":"heading","d":3,"v":"仿迅雷"}]}]}).fit()</script>
</body>
</html>
